详情-已支付
<template>
  <a-modal
    :visible="visible"
    title="付款处理"
    cancelText="取消"
    okText="确定"
    width="900px"
    @ok="submit"
    @cancel="cancel"
  >
    <div>
      <a-row>
        <a-col :span="6">币种：{{ formatter( formData.data.currency, 'currency' ) }}</a-col>
        <a-col :span="6">交易金额：{{ formData.data.tradeAmt }}</a-col>
        <a-col :span="6">实时汇率：{{ formData.data.chRate }}</a-col>
        <a-col :span="6">等额人民币：{{ formData.data.rmbAmt }}</a-col>
      </a-row>
    </div>
    <a-row>
      <a-col :span="24">
        付款方式：
        <a-radio-group v-model:value="modelForm.data.payMethod">
          <a-radio value="4">手动付款</a-radio>
          <a-radio value="5">银企直联</a-radio>
        </a-radio-group>
      </a-col>
    </a-row>
    <a-row>
      <a-form
        ref="formRef"
        :model="modelForm.data"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-row v-if="modelForm.data.payMethod == 4">
          <a-col :span="8">
            <a-form-item label="付款时间：  ">
              <a-date-picker
                v-model:value="modelForm.data.paymentTime"
                show-time
                placeholder="请选择"
                @change="onTimeChange"/>
            </a-form-item>
          </a-col>
          <a-col :span="16">
            <a-form-item label="付款备忘：" name="remark">
              <a-input
                v-model:value="modelForm.data.remark"
                placeholder="请输入"
                :maxlength="100"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <div class="title">收款信息</div>
        <a-row>
          <a-col :span="8">
            <a-form-item label="收款人：" name="recName">
              <a-input
                v-model:value="modelForm.data.recName"
                placeholder="请输入"
                :maxlength="50"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="支付方式：" name="paymentMethod">
              <a-select
                v-model:value="modelForm.data.paymentMethod"
                style="width: 180px">
                <a-select-option
                  v-for="(item, index) in dictLists.data[dictEnum.PAY_METHOD]"
                  :key="index" :value="item.value">{{ item.label }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="缴款账号：" name="payAmt">
              <a-input
                v-model:value="modelForm.data.payAmt"
                placeholder="请输入"
                :maxlength="25"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="8">
            <a-form-item label="收款账号：" name="recAmt">
              <a-input
                v-model:value="modelForm.data.recAmt"
                placeholder="请输入"
                :maxlength="25"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="SWIFT CODE:" name="swiftCode">
              <a-input
                v-model:value="modelForm.data.swiftCode"
                placeholder="请输入"
                :maxlength="25"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-row>
  </a-modal>
</template>

<script>
import { defineComponent, reactive, createVNode, ref, watch } from "vue";
import { message, modal } from "ant-design-vue";
import { getDictByCodesReturnObj } from "../../../tools/get-dict";
import dictEnum from "../../../const/dict";
import moment from "moment";
import { useI18n } from "vue-i18n";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { queryFinance, editFinance } from "../../../api/module/finance-payment";
export default defineComponent({
  props: {
    visible: {
      type: Boolean
    },
    record: {
      type: Object
    }
  },
  emit: ["close"],
  setup(props, context) {
    watch(props, async props => {
      formState.id = props.record.id;
      formState.path = props.record.path;
      dictLists.data = await getDictByCodesReturnObj([
        dictEnum.CURRENCY, // 币种
        dictEnum.PAY_METHOD, // 支付方式
      ]);
      if (props.record.id) {
        queryFinance({id: props.record.id, fncType: '2'}).then(res => {
          if (res.success) {
            res.data.paymentTime = res.data.paymentTime
                                  ? moment(res.data.paymentTime).format('YYYY-MM-DD HH:mm:ss')
                                  : ''
            formData.data = {...res.data}
          }
        })
      }
    });

    const formRef = ref();
    const modelForm = reactive({
      data: {
        paymentTime: ''
      }
    })
    const formData = reactive({
      data: {}
    })
    const  { t } = useI18n()
    let dictLists = reactive({
      data: {},
    });
    const resetForm = () => {
      formRef.value.resetFields();
    };
    const formState = reactive({
      sort: 0,
      enable: "true"
    });

    const cancel = e => {
      context.emit("close", 'visiblePaid');
    };

    const submit = e => {
      let params = {
        ...modelForm.data,
        isRedDashed: 1        
      }
      editFinance(params).then(res => {
        if (res.success) {
          message
            .success({ content: "操作成功", duration: 1 })
            .then(() => {
              cancel();
            });
          
        } else {
          message.error({
            content: "操作失败",
            duration: 1,
          });
        }
      })
    };
    const onTimeChange = (value) => {
      console.log('value: ', value);
    }

    const formatter = (value, type) => {
      let result = '';
      switch (type) {
        case 'currency': {
          const item = dictLists.data[dictEnum.CURRENCY]
                        ? dictLists.data[dictEnum.CURRENCY].find((v) => v.value == value)
                        : {};
          result = item ? item.label : "";
        }
        break;
        case 'paymentMethod': {
          const item = dictLists.data[dictEnum.PAY_METHOD]
                        ? dictLists.data[dictEnum.PAY_METHOD].find((v) => v.value == value)
                        : {};
          result = item ? item.label : "";
        }
        break;
        case 'paymentTime': {
          result = value ? moment(value).format('YYYY-MM-DD') : "";
        }
        break;
      }
      return result;
    }


    return {
      cancel,
      submit,
      formRef,
      formData,
      formState,
      resetForm,
      onTimeChange,
      formatter,
      modelForm,
      dictLists,
      dictEnum,
      labelCol: { span: 6 },
      wrapperCol: { span: 18 }
    };
  }
});
</script>
<style lang="less" scoped>
.title {
  color: #000;
  font-weight: 700;
}
/deep/.ant-col {
  padding: 10px 0;
}
.content {
  margin: 0px -10px;
  padding: 0 10px;
  border-radius: 5px;
  border: 1px dashed #d1d1d1;
}
/deep/.ant-form-item-control {
  padding: 10px 10px;
}
</style>
